import React, {useEffect, useMemo, useState, useTransition} from "react";
import './index.scss'
import LineEcharts from "../../components/Echarts/LineEchart";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import ColumnEcharts from "../../components/Echarts/ColumnEchart";
import {literatureRanking, articleRanking, regionRanking} from "../../api";
import RequestLoading from "../../components/RequestLoading";

interface DataType {
    id: string,
    name: string,
    visit_num: number
}

const Home = () => {
    const [loading, setTransition] = useTransition();
    // 文献排名
    const [literatureData, setLiteratureData] = useState<Array<DataType>>([]);
    // 文章排名
    const [articleData, setArticleData] = useState<Array<DataType>>([]);
    // 区域排名
    const [regionData, setRegionData] = useState<Array<DataType>>([]);
    const getData = () => {
        setTransition(() => {
            literatureRanking().then(r => {
                const {rows} = r.data.data.data;
                setLiteratureData(rows);
            });
            articleRanking().then(r => {
                const {rows} = r.data.data.data;
                setArticleData(rows);
            });
            regionRanking().then(r => {
                const {rows} = r.data.data.data;
                setRegionData(rows);
            })
        })
    }

    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const [time, setTime] = useState<string>(`${hours}:${minutes}:${seconds}`);

    const timeInter = setInterval(() => {
        setTime(`${hours}:${minutes}:${seconds}`);
    }, 1000);
    useEffect(() => {
        getData();
        return () => clearTimeout(timeInter)
    }, []);

    return (
        <div className="home-box">
            <div>
                <div>
                    <LineEcharts height={130}/>
                    <div>
                        <h2>{time}</h2>
                        <p><ExclamationCircleOutlined/></p>
                    </div>
                </div>
                <div>
                    <LineEcharts height={130} xData={['78', '12', '23', '12', '231', "231"]}
                                 yData={[64, 12, 23, 12, 231, 231]}/>
                    <div>
                        <h2>文章访问</h2>
                        <p><ExclamationCircleOutlined/></p>
                    </div>
                </div>
                <div>
                    <ColumnEcharts/>
                    <div>
                        <h2>区域访问</h2>
                        <p><ExclamationCircleOutlined/></p>
                    </div>
                </div>
            </div>
            {
                loading ? <RequestLoading/> : (
                    <div>
                        <div>
                            <h2>文献top↓</h2>
                            <ol>
                                <RankingList data={literatureData}/>
                            </ol>
                        </div>
                        <div>
                            <h2>文章排名top↓</h2>
                            <ol>
                                <RankingList data={articleData}/>
                            </ol>
                        </div>
                        <div>
                            <h2>区域top↓</h2>
                            <ol>
                                <RankingList data={regionData}/>
                            </ol>
                        </div>
                    </div>
                )
            }
        </div>
    )
}

export default Home;

const RankingList = ({data}: { data: Array<DataType> }) => {
    return (
        <>
            {
                data.map((v: DataType, index: number) => {
                    return (
                        <li key={v.id}>
                            <span><i>{index + 1}</i></span>
                            <span>{v.name}</span>
                            <span>浏览数：{v.visit_num}</span>
                        </li>
                    )
                })
            }
        </>
    )
}
